<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        #tab1 .aui-active {
            color: #f23030;
            border-bottom: 2px solid #f23030;
        }

        .aui-list-item-middle {
            padding-left: 0.75rem;
        }

        .aui-radio:checked {
            background-color: #f23030;
            border: solid 1px #f23030;
        }

        .aui-toast {
            width: 9.5rem;
            background: #999;
            opacity: 0.7;
            height: 4rem;
            min-height: 4rem;
            line-height: 4rem;
        }

        .aui-toast-content {
            color: #fff;
        }

        .aui_list {
            background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%);
        }

        .aui-list-item {
            background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%) !important;
        }

        .aui-refresh-content {
            min-height: 100vh;
            padding-bottom: 2.5rem;
        }

        .exchangeList_img {
            background: url(../../image/cpimg.jpg) center center/cover no-repeat;
            background-size: 100% 100%;
        }

        .exchangeList_right {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            padding: 0.5rem 0.5rem 0;
        }

        .aui-list.ex .aui-list-item-media {
            width: 5rem;
            height: 4rem;
            padding-right: 1rem;
        }

        .aui-list.ex .aui-list-item-media {
            padding-top: 0;
            padding-bottom: 0;
        }

        .exchangeList_right_txt {
            position: relative;
            width: 100%;
        }

        .exchangeList_right_bottom {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            line-height: 0.6rem;
        }

        .exchangeList_right_bottom1 {
            float: left;
            font-size: 0.7rem;
            color: #f23030;
        }

        .exchangeList_right_bottom2 {
            float: right;
        }

        .aui-list.ex .aui-list-item-title {
            font-size: 0.7rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .aui-list-item-title span {
            color: #f23030
        }

        .evalute_img {
            position: relative;
        }

        .evalute_img span {
            position: absolute;
            top: 50%;
            left: 0.75rem;
            height: 1.4rem;
            margin-top: -0.7rem;
            font-size: 0.9rem;
            color: #fff;
            font-weight: 600;
        }

        .aui-list-item-right .evaluate_btn {
            border: 1px solid #333;
            color: #333;
            padding: 0.1rem 0.5rem;
            border-radius: 0.1rem;
            font-size: 0.7rem;
        }

        .aui-media-list-item-inner1 {
            border-bottom: 1px solid #eee;
        }

        .duihuan {
            color: #f23030;
            font-size: 0.7rem;
        }
        /*其他信息*/

        .other_content {
            background: #fff;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .other_content ul li {
            position: relative;
            display: flex;
            padding: 0.5rem;
            line-height: 1;
            font-size: 0.75rem;
            justify-content: space-between;
            align-items: center;
        }

        .other_content ul li::after {
            position: absolute;
            content: "";
            bottom: 0;
            right: 0;
            width: calc(100% - 0.5rem);
            height: 1px;
            background: #eee;
        }

        .other_content ul li .title {
            text-align: justify;
            text-align-last: justify;
            width: 25%;
        }

        .other_content ul li .cnt {
            color: #888;
            width: 75%;
            word-break: break-all;
            word-wrap: break-word;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak style="box-sizing:border-box">
        <div class="evalute_img">
            <img src="../../image/evaluate_top_1.png" alt="evaluate_top_1.jpg" width="100%">
            <span>{{test | status}}</span>
        </div>
        <!-- <ul class="aui-list aui-list-in">
              <li class="aui-list-item aui-list-item-middle">
                  <div class="aui-list-item-inner aui-list-item-arrow">
                      <div class="aui-list-item-title">您当前共有 <span>2400 兑换币</span></div>
                      <div class="aui-list-item-right"><span class="duihuan">去兑换</span></div>
                  </div>
              </li>
          </ul> -->
        <!-- <ul class="aui-list aui-media-list">
            <li class="aui-list-item-middle" style="padding-right:0.75rem;padding-top: 0.5rem;">
                <div class="aui-media-list-item-inner" style="padding-left:1.5rem;">
                  <div class="aui-list-item-media" style="width: 9.5rem;">收货人：fsfsfdf</div>
                  <div class=" makeSure_get_text" style="">158582965696</div>
                </div>
                <div class="aui-media-list-item-inner" style="margin-top: -0.7rem;">
                    <div class="aui-list-item-media" style="width:1.5rem;padding-right:0">
                        <img src="../../image/my/m39.png" style="width:0.8rem;">
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-12">收货地址：浙江省杭州市西湖区黄龙万科中心</div>
                        </div>
                    </div>
                </div>
                <img src="../../image/my/m38.png" alt="" style="margin-top: 0.5rem;">
            </li>

            <li class="aui-list-item-middle" style="padding-right:0.75rem;padding-top: 0.5rem;" onclick="open_userUrl()">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media" style="width:1.5rem;padding-right:0">
                        <img src="../../image/my/m39.png" style="width:0.8rem;">
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-12">点击添加收货地址</div>
                        </div>
                    </div>
                </div>
                <img src="../../image/my/m38.png" alt="" style="margin-top: 0.5rem;">
            </li>

            <li><div class="user_nav_line"></div></li>
          </ul> -->
        <div v-for="list in info">
            <ul class="aui-list aui-media-list" style="margin-top:10px;" >
                <li class="aui-list-item-middle aui-list-item">
                    <div class="aui-media-list-item-inner aui-media-list-item-inner1">
                        <div class="aui-list-item-media" style="width:1.4rem;padding-right:5px">
                            <img :src="list.store_logo" class="aui-list-img-sm order_sm_img">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">{{list.store_name}}</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item-middle aui-list-item apply_main_li" style="padding-bottom:0.7rem;">
                    <div class="aui-media-list-item-inner" v-for="item in list.goods" v-if="item.type != 5 ">
                        <div class="aui-list-item-media" style="width: 5rem;">
                            <img :src="item.goods_pic" class="aui-list-img-md">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title" style="width: 100%;padding-right: 0.2rem;">
                                    <div class="aui-font-size-12">{{item.goods_name}}</div>
                                    <div class="aui-list-item-text aui-font-size-12">
                                        <div class="make_nav_content_div">
                                            {{item.sku_info}}
                                        </div>
                                        <div class="aui-list-item-right" style="font-size:0.7rem">×{{item.goods_nums}}</div>
                                    </div>

                                    <div class="aui-list-item-text aui-font-size-18 make_money_tag" style="margin-top:0.4rem">
                                        <div class="make_nav_content_div" v-if="item.type == 1">
                                            <span class="make_money_tag_text">￥</span>
                                            <span style="color:#f23030;">{{item.goods_price}}</span>
                                        </div>
                                        <div class="make_nav_content_div" v-else-if="item.type == 2">
                                            <span class="make_money_tag_text">{{item.goods_price}}分</span>
                                        </div>
                                        <div class="make_nav_content_div" v-else-if="item.type == 3">
                                            <span class="make_money_tag_text">{{item.goods_price}}兑换币</span>
                                        </div>
                                        <div class="aui-list-item-right" style="font-size:0.7rem">
                                            <div class="evaluate_btn" v-if="list.order_status == 4 && info[0].evaluate_type == 0" @click="openDetail(item, info.o_id)">去评价</div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div>

                        <div class="aui-list ex" v-for="item in list.goods" v-if="item.type == 5 ">
                            <h5>附送赠品</h5>
                            <div class="exchangeList_right">
                                <div class="aui-list-item-media">
                                    <div :style="'background:url('+item.goods_pic+') no-repeat center/cover;width:100%;height:3rem;'" class="exchangeList_img"></div>
                                </div>
                                <div class="exchangeList_right_txt">
                                    <div class="aui-list-item-text">
                                        <div class="aui-list-item-title">{{item.goods_name}}</div>
                                    </div>
                                    <div class="aui-list-item-text">{{item.sku_info}}</div>
                                    <div class="exchangeList_right_bottom clearfix">
                                        <div class="exchangeList_right_bottom1">赠品</div>
                                        <div class="exchangeList_right_bottom2">×{{item.goods_nums}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </li>
            </ul>


            <div class="other_content">
                <ul>
                    <li>
                        <div class="title">邮费：</div>
                        <div class="cnt" style="color:#f23030;">￥{{list.express_fee}}</div>
                    </li>
                    <li>
                        <div class="title">订单编号：</div>
                        <div class="cnt">{{list.order_no}}</div>
                    </li>
                    <li>
                        <div class="title">下单时间：</div>
                        <div class="cnt">{{list.order_time}}</div>
                    </li>
                    <li>
                        <div class="title">买家名称：</div>
                        <div class="cnt">{{list.consignee}}</div>
                    </li>
                    <li>
                        <div class="title">买家留言：</div>
                        <div class="cnt">{{list.remark1}}</div>
                    </li>
                    <li>
                        <div class="title">买家电话：</div>
                        <div class="cnt">{{list.telephone}}</div>
                    </li>
                    <li>
                        <div class="title">收货地址：</div>
                        <div class="cnt">{{list.province}}{{list.city}}{{list.district}}{{list.address}}</div>
                    </li>
                    <li>
                        <div class="title">总计付款：</div>
                        <div class="cnt" style="color:#f23030;">￥{{list.total_price}}</div>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    apiready = function() {
        // console.log(api.pageParam.id.length);
        var ids_arr = api.pageParam.id;
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
                info: [],
                test: 0
            },
            created: function() {
                // alert(api.pageParam.id)
                var $_this = this
                    // api.ajax({
                    //     url: window.Url.Freeorder_orderDetails,
                    //     method: 'post',
                    //     data: {
                    //         values: {
                    //             token: $api.getStorage('token'),
                    //             orderId: api.pageParam.id
                    //         }
                    //     }
                    // }, function(ret, err) {
                    //     if (ret) {
                    //       console.log(JSON.stringify(ret))
                    //       if(ret.re==1){
                    //         //  alert(JSON.stringify(ret))
                    //           $_this.info = ret.data.list
                    //       }
                    //     } else {
                    //         api.alert({msg: JSON.stringify(err)});
                    //     }
                    // })
                for (var i = 0; i < ids_arr.length; i++) {
                    (function() {
                        api.ajax({
                            url: window.Url.Freeorder_orderDetails,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    orderId: ids_arr[i]
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.re == 1) {
                                    //  alert(JSON.stringify(ret))
                                    $_this.test = ret.data.list.order_status;
                                    $_this.info.push(ret.data.list)
                                }
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    })()
                }

            },
            mounted: function() {
                var $this = this;
                api.hideProgress();
            },
            methods: {
                openDetail: function(info, id) {
                    api.openWin({
                        name: 'order_evaluate_detail',
                        url: './order_evaluate_detail.html',
                        pageParam: {
                            info: info,
                            id: id
                        }
                    });
                }
            },
            filters: {
                status: function(val) {
                    switch (Number(val)) {
                        case 1:
                            return '待付款'
                            break;
                        case 2:
                            return '待发货'
                            break;
                        case 3:
                            return '已发货'
                            break;
                        case 4:
                            return '已完成'
                            break;
                        case 5:
                            return '已关闭'
                            break;
                        case 6:
                            return '退款/售后中'
                            break;
                        case 8:
                            return '订单退货中'
                            break;
                        case 9:
                            return '返仓中'
                            break;
                        case 10:
                            return '已返仓'
                            break;
                        default:
                            return
                    }
                }
            }
        })
    };
</script>

</html>
